import { NavLink } from "react-router-dom";
import { headerLinks} from "common/local-data";
import {SearchOutlined } from "@ant-design/icons";
import { Input } from "antd";
import {
  HeaderWrapped,
  HeaderLeft,
  HeaderRight
} from "./style";
import { memo } from "react";
export default memo (
  function HAppHeader () {
    return (
      <HeaderWrapped>
        <div className={"content wrap-v1"}>
          <HeaderLeft>
            <a href="#/" className={"logo sprite_01"} >aaa</a>
            <div className={"select-list"}>
              {headerLinks.map((item, index) => {
                return (
                  <div className={"select-item"} key={item.title}>
                    {index < 3 ? (
                      <NavLink to={item.link}>
                        {item.title} <i className={"icon sprite_01"} />
                      </NavLink>
                    ) : (
                      <a href={item.link} rel="noreferrer" target={"_blank"}>
                        {item.title}
                      </a>
                    )}
                  </div>
                );
              })}
            </div>
          </HeaderLeft>
          <HeaderRight>
            <Input
              className={"search"}
              placeholder="音乐/视频/电台/用户"
              prefix={<SearchOutlined />}
            />
            <a href={"https://music.163.com/#/login?targetUrl=%2Fcreatorcenter"}  rel="noreferrer" target={"_blank"} className={"center"}>创作者中心</a>
            <div className={"login"}>
              <a href={"#"}>登录</a>
              <div className="sign">
                <i className={"arr"} />
              </div>
            </div>
          </HeaderRight>
        </div>

        <div className={"divider"} />
      </HeaderWrapped>
    );
  }
)
